<template>
  <view>
    <block v-for="(category, index) in paramList">
      <view class="filter-content-title">{{ category.name }}</view>
      <view class="search-filter-content">
        <!-- <view :class="catcheparams[item.name]==''?'filter-item-active':''" class="filter-item"
          @tap.stop="paramClick" :data-paramkey="item.name" data-paramval="">全部</view> -->
        <block v-for="(param,paramIndex) in category.params" :key="param.dictCode">
          <view
              :class="[ choseValue[index]==paramIndex ? 'filter-item-active' : '', 'filter-item']"
              class="filter-item" @tap.stop="paramClick(index, paramIndex)">
            {{ param.dictLabel }}
          </view>
        </block>
      </view>
    </block>
  </view>
</template>

<script>
import {chooseAndUploadFile} from "@/uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file";

export default {
  props: {
    paramList: {
      type: '',
      default: []
    }
  },
  data() {
    return {
      choseValue: [],
    };
  },
  methods: {
    lazyInitChoseList() {
      // 初始化数据，每个菜单下标都有单独选择的项，将选择项存储和菜单下标进行绑定
      if (this.choseValue.length != this.paramList.length) {
        this.initChoseList()
      }
    },
    initChoseList() {
      this.choseValue = []
      for (let i = 0; i < this.paramList.length; i++) {
        this.choseValue.push(undefined)
      }
      this.$set(this.choseValue, this.choseValue)

    },
    paramClick(categoryIndex, selectedIndex) {
      // 更新选中的值
      const category = this.paramList[categoryIndex];
      this.lazyInitChoseList()
      // 数据为数组，数组下标为菜单的下标，存储的是该菜单选择过的对应数据下标，查询选择下菜单下标是否是上次选择，不是则修改数据
      if (this.choseValue[categoryIndex] != selectedIndex) {
        this.$set(this.choseValue, categoryIndex, selectedIndex)
        //this.choseValue[categoryIndex]=selectedValue
      }
      this.$emit('click',category.params[selectedIndex],categoryIndex);
    }
  }
}
</script>

<style lang="scss">
.filter-content-title {
  color: #000;
  font-weight: 700;
  font-size: 28rpx;
  height: 30rpx;
  line-height: 30rpx;
  padding: 0 30rpx;
  margin-top: 30rpx;
  margin-bottom: 10rpx
}

.search-filter-content {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 20rpx;
}

.search-filter-content .filter-item {
  background: #F4F4F4;
  border-radius: 28rpx;
  color: #2B2B2B;
  font-weight: bold;
  margin: 10rpx 10rpx;
  min-width: 140rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  font-size: 24rpx;
  padding: 0 30rpx
}

.search-filter-content .filter-item-active {
  color: #3388ff;
  background: rgba(51, 136, 255, 0.1);
}

.search-filter-content .close {
  text-align: right;
  font-size: 24rpx;
  color: #ff4544;
  width: 100%;
  padding-right: 20rpx
}
</style>
